<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse="$store.state.isCollapse"
    :collapse-transition="false"
  >
    <el-menu-item
      index="/dashboard"
      class="first-lev-menu"
      @click="toPage($event)"
      data-path="/dashboard"
      data-name="默认页"
    >
      <i class="el-icon-s-home"></i>
      <span slot="title">默认页</span>
    </el-menu-item>
    <el-menu-item
      index="/demo_list"
      class="first-lev-menu"
      @click="toPage($event)"
      data-path="/demo_list"
      data-name="列表页面"
    >
      <i class="el-icon-menu"></i>
      <span slot="title">列表页面</span>
    </el-menu-item>
    <el-submenu index="3">
      <template slot="title">
        <div class="first-lev-menu">
          <i class="el-icon-s-grid"></i>
          <span>多种列表</span>
        </div>
      </template>
      <el-menu-item
        class="sub-menu-item"
        index="/pagenation_list"
        @click="toPage($event)"
        data-path="/pagenation_list"
        data-name="分页列表"
        >分页列表</el-menu-item
      >
      <el-menu-item
        index="/horzontal_scroll_list"
        class="sub-menu-item"
        @click="toPage($event)"
        data-path="/horzontal_scroll_list"
        data-name="横向滑动列表"
        >横向滑动列表</el-menu-item
      >
      <el-menu-item
        index="/checkbox_list"
        class="sub-menu-item"
        @click="toPage($event)"
        data-path="/checkbox_list"
        data-name="复选框列表"
        >复选框列表</el-menu-item
      >
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <div class="first-lev-menu">
          <i class="el-icon-location"></i>
          <span>分组菜单四</span>
        </div>
      </template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组二">
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4" class="sub-menu-pull-down">
        <template slot="title">选项4</template>
        <el-menu-item index="1-4-1">选项1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="5" disabled class="first-lev-menu">
      <i class="el-icon-document"></i>
      <span slot="title">禁用菜单五</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      isCollapse: this.$store.state.isCollapse,
    };
  },
  methods: {
    ...mapActions({
      setTags: "setTags",
      addTags: "addTags",
    }),
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toPage(obj) {
      var _path = obj.$attrs["data-path"];
      var _name = obj.$attrs["data-name"];
      var _hasTag = false;
      _hasTag = this.$manageTags.checkTags(_path, _name);
      //同步头部标签
      if (_hasTag) {
        //已有标签
        this.$router.replace(_path);
      } else {
        //没有标签
        var _obj = {
          name: _name,
          status: "active",
          type: "",
          path: _path,
        };
        this.addTags(_obj);
        this.$router.replace(_path);
      }
    },
  },
};
</script>
<style>
.el-submenu .el-menu-item {
  min-width: 199px !important;
}
.first-lev-menu {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.sub-menu-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 48px !important;
}
.el-menu-item-group__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 48px !important;
}
.el-submenu__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.sub-menu-pull-down .el-submenu__title {
  padding-left: 78px !important;
}
.sub-menu-pull-down .el-menu-item {
  padding-left: 95px !important;
}
.el-menu-vertical-demo{
  border-right: 0px !important;
}
</style>
